<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SimplePagePagination</title>
    <style>
        h1
        {
            text-align: center;
            color: #00b813;
        }

        ul.pagination
        {
            display: inline-block;
            padding: 0;
            margin: 0;
        }

        ul.pagination li
        {
            display: inline;
        }

        ul.pagination li a {
            font-size: 20px;
            color: #ff070e;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
            /*边框效果*/
            border: 1px solid cyan;
            /*圆角矩形*/
            border-radius: 5px;
            /*过度效果*/
            transition: background-color 0.3s;
            /*分割效果*/
            margin: 0 4px;
        }

        ul.pagination li a.active
        {
            background-color: #00b813;
            color: black;
        }

        ul.pagination li a:hover:not(.active)
        {
            background-color: #888888;
        }
    </style>
</head>
<body>

<h1>
    Simple Page Pagination
</h1>

<br>

<div style="text-align: center">
    <ul class="pagination">
        <li><a href="#"><<</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#" class="active">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>
        <li><a href="#">>></a></li>
    </ul>
</div>


</body>
</html>